<template>
  <div class="addPlan">
    <el-form
      ref="maintenanceFormRef"
      :model="maintenanceForm"
      :rules="rules"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
      label-position="top"
    >
      <div class="home-card-item">
        <el-row style="margin-bottom: 20px">
          <el-col :span="6">
            <el-form-item label="计划类型" prop="planType">
              <el-select
                v-model="maintenanceForm.planType"
                placeholder="请选择计划类型"
                @change="planTypeChange"
                :disabled="id != ''"
                style="width: 80%"
              >
                <el-option label="单次点检" value="1" />
                <el-option label="周期点检" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计划开始时间" prop="planBeginDate">
              <el-date-picker
                :disabled-date="pickerOptions"
                v-model="maintenanceForm.planBeginDate"
                placeholder="请选择计划开始时间"
                type="date"
                size="default"
                value-format="YYYY-MM-DD"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="maintenanceForm.planType == '2'">
            <el-form-item label="计划结束时间" prop="planEndDate">
              <el-date-picker
                :disabled-date="pickerOptions"
                v-model="maintenanceForm.planEndDate"
                placeholder="请选择计划结束时间"
                type="date"
                size="default"
                value-format="YYYY-MM-DD"
                style="width: 80%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="点检类型" prop="checkType">
              <el-select
                v-model="maintenanceForm.checkType"
                placeholder="请选择点检类型"
                @change="checkTypeChange"
                style="width: 80%"
              >
                <el-option
                  v-for="item in checkType"
                  :label="item.configValue"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="点检人" prop="checkUser">
              <el-select
                v-model="maintenanceForm.checkUser"
                filterable
                multiple
                collapse-tags
                multiple-limit="5"
                placeholder="可搜索姓名/下拉选择点检人"
                @change="checkUserChange"
                style="width: 80%"
              >
                <el-option
                  v-for="item in checkUsers"
                  :label="item.realName"
                  :value="item.id"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="maintenanceForm.planType == '2'">
            <el-form-item label="点检周期" prop="period">
              <el-input
                v-model="maintenanceForm.period"
                placeholder="输入点检周期"
                class="input-with-select"
                clearable
                style="width: 80%"
              >
                <template #append>
                  <el-select
                    v-model="maintenanceForm.periodUnit"
                    placeholder="单位"
                    style="width: 100px"
                  >
                    <el-option
                      v-for="item in periodUnits"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="home-card-item shebei">
        <el-form-item
          label="设备选择"
          style="width: 100%"
          :rules="{ required: true }"
        >
          <div class="shebei-select">
            <div class="shebei-select__tree">
              <el-input v-model="filterText" placeholder="可输入类型进行搜索" />
              <el-tree
                ref="treeRef"
                class="filter-tree tree"
                :data="data"
                :props="defaultProps"
                :expand-on-click-node="false"
                default-expand-all
                @node-click="deviceTypeClick"
                :filter-node-method="filterNode"
              >
                <template #default="{ node, data }">
                  <el-tooltip
                    :content="node.label"
                    placement="top"
                    v-if="node.label.length > 8"
                  >
                    <span
                      class="treeLabel"
                      :class="{ active: currentNode.id == data.id }"
                      >{{ node.label }}</span
                    >
                  </el-tooltip>
                  <span v-else :class="{ active: currentNode.id == data.id }">{{
                    node.label
                  }}</span>
                </template>
              </el-tree>
            </div>
            <div class="shebei-select__table">
              <TableSearch :search="state.search" @search="onSearch" />
              <Table
                ref="tableRef"
                v-bind="state.tableData"
                class="table-demo"
                @pageChange="onTablePageChange"
                @listenClick="listenClick"
              >
                <template #default="{ slotData, slotColumn }">
                  <div v-if="slotColumn.key === 'isSupport'">
                    {{ slotData.isSupport }}
                  </div>
                </template>
              </Table>
            </div>
            <div class="shebei-select__xuanze">
              <div class="xuanze-herder">
                <div>已选择：{{ maintainDeviceNames.length }}个</div>
                <div class="empty" @click="emptyDevice">清空</div>
              </div>
              <div class="people">
                <div
                  class="people-item treeLabel"
                  v-for="(item, index) in maintainDeviceNames"
                >
                  {{ index + 1 + '、' + item.num + '-' + item.name }}
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
      </div>

      <div class="home-card-item">
        <el-form-item
          label="点检项目选择"
          style="width: 100%"
          :rules="{ required: true }"
        >
          <div class="weibao-tips">
            <span class="tips"
              >点检项，可在【设备点检管理-点检标准】中配置</span
            >
            <span class="sets" @click="goSetting">去设置</span>
          </div>
          <div class="weibao-select">
            <div class="weibao-select__table">
              <TableSearch :search="state.search2" @search="onSearch2" />
              <Table
                ref="tableRef"
                v-bind="state.tableData2"
                class="table-demo"
                @pageChange="onTablePageChange2"
                @listenClick="listenClick2"
              >
                <template #default="{ slotData, slotColumn }">
                  <div v-if="slotColumn.key === 'isSupport'">
                    {{ slotData.isSupport }}
                  </div>
                </template>
              </Table>
            </div>
            <div class="weibao-select__xuanze">
              <div class="xuanze2-herder">
                <div class="herder2-num">
                  已选择：{{ maintainItemNames.length }}个
                </div>
                <div class="empty" @click="emptyDevice2">清空</div>
              </div>
              <div class="people2">
                <div
                  class="people2-item treeLabel"
                  v-for="(item, index) in maintainItemNames"
                >
                  {{ index + 1 + '、' + item }}
                </div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div v-if="!id" style="margin-right: 10px">
            保存后即定时生成任务，可在【点检任务】中查看
          </div>
          <el-button @click="resetForm(maintenanceFormRef)">取消</el-button>
          <el-button
            type="primary"
            @click="submitForm(maintenanceFormRef)"
            :loading="loading"
          >
            确定
          </el-button>
        </el-form-item>
      </div>
    </el-form>
    <AddWeibaoItems
      :addDialog="addDialog"
      @addCancel="addCancel"
      @addSubmit="addSubmit"
    ></AddWeibaoItems>
  </div>
</template>
<script setup lang="ts">
import {
  ElMessage,
  ElMessageBox,
  ElTree,
  FormInstance,
  FormRules
} from 'element-plus'
import { ref, reactive, watch, defineAsyncComponent, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { dictionaryList, getDirectorListApi } from '/@/api/publicApi'
import {
  getPlanInfoApi,
  saveMaintainPlanApi,
  updateMaintainPlanApi
} from '/@/api/check'
import routes from '/@/router'
import { Session } from '/@/utils/storage'
const userInfo = Session.get('shebei')
const AddWeibaoItems = defineAsyncComponent(
  () => import('./components/AddWeibaoItems.vue')
)
const route = useRoute()
const id = ref(route.query.id)
const periodUnits = ref(['天', '周', '月', '年'])
const formSize = ref('default')
const loading = ref(false)
const maintenanceFormRef = ref<FormInstance>()
const maintenanceForm = ref({
  planType: '',
  checkType: '',
  checkTypeName: '',
  period: '',
  periodUnit: '',
  checkUser: [] as any,
  checkUserName: [] as any,
  planBeginDate: '',
  planEndDate: '',
  deviceType: '',
  checkItems: '',
  checkDevices: ''
})

const validateCheckDevices = (rule: any, value: any, callback: any) => {
  if (maintainDeviceNames.value.length == 0) {
    callback(new Error('请选择设备'))
  } else {
    callback()
  }
}
const validateCheckItems = (rule: any, value: any, callback: any) => {
  if (maintainItemNames.value.length == 0) {
    callback(new Error('请选择点检项目'))
  } else {
    callback()
  }
}
const validatorTime = (rules: any, value: any, callback: any) => {
  if (Date.parse(maintenanceForm.value.planBeginDate) > Date.parse(value)) {
    callback(new Error('结束时间必须大于等于开始时间'))
  } else {
    callback()
  }
}

const pickerOptions = (time: any) => {
  return time.getTime() < Date.now() - 8.64e7
}

const validateMaintainPeriod = (rules: any, value: any, callback: any) => {
  if (maintenanceForm.value.period == '') {
    callback(new Error('请输入点检周期数'))
  } else if (maintenanceForm.value.periodUnit == '') {
    callback(new Error('请选择点检周期'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  planType: [{ required: true, message: '请选择计划类型', trigger: 'change' }],
  checkType: [
    {
      required: true,
      message: '请选择点检类型',
      trigger: 'change'
    }
  ],
  planBeginDate: [
    {
      required: true,
      message: '请选择开始时间',
      trigger: 'change'
    }
  ],
  planEndDate: [
    {
      required: true,
      message: '请选择结束时间',
      trigger: 'change'
    },
    { validator: validatorTime, trigger: 'change' }
  ],
  checkUser: [
    {
      required: true,
      message: '请选择点检人',
      trigger: 'change'
    }
  ],
  period: [
    // {
    //     required: true,
    //     message: '请输入点检周期',
    //     trigger: 'blur',
    // },
    {
      required: true,
      validator: validateMaintainPeriod,
      trigger: ['blur', 'change']
    }
  ],
  checkDevices: [{ validator: validateCheckDevices, trigger: 'change' }],
  checkItems: [{ validator: validateCheckItems, trigger: 'change' }]
})

const checkType = ref<any>([])
const getMaintainType = () => {
  dictionaryList({ configType: 'check_type', keyword: '' }).then((res) => {
    if (res.code == 0) {
      checkType.value = res.data
    }
  })
}
getMaintainType()
const checkUsers = ref<any>([])
const getCheckUser = () => {
  getDirectorListApi(3).then((res) => {
    if (res.code == 0) {
      checkUsers.value = res.data
    }
  })
}
getCheckUser()

const submitForm = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let params = JSON.parse(JSON.stringify(maintenanceForm.value))
      params.checkUser = maintenanceForm.value.checkUser.join(',')
      params.checkUserName = maintenanceForm.value.checkUserName.join(',')

      if (id.value == '') {
        if (maintainDeviceNames.value.length == 0) {
          ElMessage.warning('请选择设备!')
          loading.value = false
        } else if (maintainItemNames.value.length == 0) {
          ElMessage.warning('请选择点检项目!')
          loading.value = false
        } else {
          saveMaintainPlanApi(params).then((res) => {
            if (res.code == 0) {
              ElMessage.success('新增成功')
              loading.value = false
              resetForm(formEl)
            } else {
              loading.value = false
            }
          })
        }
      } else {
        params.id = id.value
        // Reflect.set(maintenanceForm.value, 'id', id.value)
        updateMaintainPlanApi(params).then((res) => {
          if (res.code == 0) {
            ElMessage.success('修改成功')
            loading.value = false
            resetForm(formEl)
          } else {
            loading.value = false
          }
        })
        loading.value = false
      }
    } else {
      loading.value = false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  routes.go(-1)
  // routes.push({
  //     name: 'maintenancePlan'
  // })
}

interface Tree {
  id: string
  configValue: string
  children?: Tree[]
  customizeFlag: number
  parentId: string
}
const data = ref<Tree[]>([])

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'configValue'
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.configValue.includes(value)
}

const getDeviceType = () => {
  dictionaryList({ configType: 'device_type', keyword: '' }).then((res) => {
    if (res.code == 0) {
      data.value = res.data
      state.tableData.param.deviceType = data.value[0].id
      state.tableData2.param.deviceType = data.value[0].id
    }
  })
}
getDeviceType()
const Table = defineAsyncComponent(
  () => import('/@/components/table/index.vue')
)
const TableSearch = defineAsyncComponent(
  () => import('/@/components/table/search.vue')
)
// 定义变量内容
const tableRef = ref<RefType>()
const state = reactive<TableDemoState>({
  tableData: {
    flash: false, // 刷新表格
    empty: false, // 清空多选
    first: false, // 首次不刷新数据
    defaultList: [],
    // 表头内容（必传，注意格式）
    header: [
      { key: 'deviceNum', colWidth: '', title: '设备编号', type: 'text' },
      { key: 'deviceName', colWidth: '', title: '设备名称', type: 'text' },
      { key: 'seatNum', colWidth: '', title: '位置号', type: 'text' }
      // { key: 'image', colWidth: '', width: '70', height: '40', title: '图片描述', type: 'image' },
    ],
    // 配置项（必传）
    config: {
      listApi: '/device/mobile/deviceInfo/getDeviceList',
      listHttp: 'post',
      total: 0, // 列表总数
      loading: true, // loading 加载
      noPage: false, // 是否分页
      isSerialNo: false, // 是否显示表格序号
      isSelection: true, // 是否显示表格多选
      isOperate: false, // 是否显示表格操作栏
      isExtend: false // 是否可以扩展
    },
    // 搜索参数
    param: {
      stopFlag: 0, // 必传参数，分页的不要传
      deviceTypes: [] // 必传参数，分页的不要传
    }
  },
  tableData2: {
    flash: false, // 刷新表格
    empty: false, // 清空多选
    first: false, // 首次不刷新数据
    defaultList: [],
    // 表头内容（必传，注意格式）
    header: [
      { key: 'itemName', colWidth: '', title: '点检项目名称', type: 'text' },
      { key: 'content', colWidth: '', title: '点检内容', type: 'text' }
      // { key: 'image', colWidth: '', width: '70', height: '40', title: '图片描述', type: 'image' },
    ],
    // 配置项（必传）
    config: {
      listApi: '/device/mobile/deviceItem/pageList',
      listHttp: 'post',
      total: 0, // 列表总数
      loading: true, // loading 加载
      noPage: false, // 是否分页
      isSerialNo: false, // 是否显示表格序号
      isSelection: true, // 是否显示表格多选
      isOperate: false, // 是否显示表格操作栏
      isExtend: false // 是否可以扩展
    },
    // 搜索参数
    param: {
      // 必传参数，分页的不要传
      itemType: 2, //类型；1.维保项目   2.点检指标
      deviceType: ''
    }
  },
  // 搜索表单，动态生成（传空数组时，将不显示搜索，注意格式）
  search: {
    param: [
      {
        label: '',
        prop: 'keyword',
        placeholder: '可输入设备编号/名称搜索',
        type: 'input'
      }
    ],
    reset: false
  },
  search2: {
    param: [
      {
        label: '',
        prop: 'keyword',
        placeholder: '可输点检项目或内容搜索',
        type: 'input'
      }
    ],
    reset: false
  }
})

// 初始化列表数据
const getTableData = () => {
  state.tableData.flash = !state.tableData.flash
  state.tableData.first = true
}
// 搜索点击时表单回调
const onSearch = (data: EmptyObjectType) => {
  state.tableData.param = Object.assign({}, state.tableData.param, { ...data })
  if (maintenanceForm.value.deviceType != '') {
    state.tableData.flash = !state.tableData.flash
    state.tableData.first = true
  } else {
    ElMessage.warning('请选择设备类型')
  }
}
// 初始化列表数据
const getTableData2 = () => {
  state.tableData2.flash = !state.tableData2.flash
  state.tableData2.first = true
}
// 搜索点击时表单回调
const onSearch2 = (data: EmptyObjectType) => {
  state.tableData2.param = Object.assign({}, state.tableData2.param, {
    ...data
  })
  if (maintenanceForm.value.deviceType != '') {
    state.tableData2.flash = !state.tableData2.flash
    state.tableData2.first = true
  } else {
    ElMessage.warning('请选择设备类型')
  }
}
// 分页改变时回调
const onTablePageChange = (page: TableDemoPageType) => {
  state.tableData.param.pageNum = page.pageNum
  state.tableData.param.pageSize = page.pageSize
  getTableData()
}
// 分页改变时回调
const onTablePageChange2 = (page: TableDemoPageType) => {
  state.tableData2.param.pageNum = page.pageNum
  state.tableData2.param.pageSize = page.pageSize
  getTableData2()
}

const maintainDeviceNames = ref<any>([])
const maintainItemNames = ref<any>([])
const typeDatas = ref<any>([])
let currentNode = ref({
  id: '',
  configValue: '',
  children: [],
  customizeFlag: 0,
  parentId: ''
})
const deviceTypeClick = (val: any) => {
  currentNode.value = val
  if (maintenanceForm.value.deviceType != val.id) {
    typeDatas.value = []
    state.tableData.param.deviceTypes = []
    maintenanceForm.value.deviceType = val.id
    if (
      maintainDeviceNames.value.length == 0 &&
      maintainItemNames.value.length == 0
    ) {
      state.tableData.param.deviceTypes.push(val.id)
      state.tableData2.param.deviceTypes = val.id
      getTableData()
      getTableData2()
    } else {
      ElMessageBox.confirm('此操作将清空已选择,确定清空吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          emptyDevice()
          emptyDevice2()
          state.tableData.param.deviceTypes.push(val.id)
          state.tableData2.param.deviceTypes = val.id
          getTableData()
          getTableData2()
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '已取消'
          })
        })
    }
  }
}

const childrenFor = (data: any) => {
  for (let index = 0; index < data.length; index++) {
    const element = data[index]
    // 1.判断element.children是对象
    if (element.children && typeof element.children == 'object') {
      childrenFor(element.children)
    } else {
      // 判断是否为子节点
      typeDatas.value.push(element.id)
    }
  }
}

const onSelectionChange = (val: any) => {
  if (state.tableData.empty) {
    state.tableData.empty = !state.tableData.empty
  }
  let arr = <any>[]
  maintainDeviceNames.value = []
  val.forEach((i: any) => {
    arr.push(i.id)
    maintainDeviceNames.value.push({ name: i.deviceName, num: i.deviceNum })
  })
  maintenanceForm.value.checkDevices = arr.join(',')
}
const emptyDevice = () => {
  maintainDeviceNames.value = []
  state.tableData.defaultList = []
  state.tableData.empty = !state.tableData.empty
}
const emptyDevice2 = () => {
  maintainItemNames.value = []
  state.tableData2.defaultList = []
  state.tableData2.empty = !state.tableData2.empty
}
const onSelectionChange2 = (val: any) => {
  if (state.tableData2.empty) {
    state.tableData2.empty = !state.tableData2.empty
  }
  let arr = <any>[]
  maintainItemNames.value = []
  val.forEach((i: any) => {
    arr.push(i.id)
    maintainItemNames.value.push(i.itemName)
  })
  maintenanceForm.value.checkItems = arr.join(',')
}
const onSelect = (val: any) => {
  if (val.selection.length == 0) {
    emptyDevice2()
  }
}
const onSelect2 = (val: any) => {}

const checkTypeChange = (val: any) => {
  checkType.value.forEach((i: any) => {
    if (i.id == val) {
      maintenanceForm.value.checkTypeName = i.configValue
    }
  })
}

const checkUserChange = (val: any) => {
  let arr = [] as any
  val.map((it: any) => {
    checkUsers.value.forEach((i: any) => {
      if (i.id == it) {
        arr.push(i.realName)
      }
    })
  })
  maintenanceForm.value.checkUserName = arr
}

const emptyBack = () => {
  state.tableData.empty = !state.tableData.empty
}

const emptyBack2 = () => {
  state.tableData.empty = !state.tableData.empty
}

//计划类型变化
const planTypeChange = (val: any) => {
  if (val == '2') {
    maintenanceForm.value.periodUnit = '天'
  } else {
    maintenanceForm.value.periodUnit = ''
  }
}

//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = {
  onSelectionChange: onSelectionChange,
  onSelect: onSelect,
  emptyBack: emptyBack
}
const objFun2 = {
  onSelectionChange: onSelectionChange2,
  onSelect: onSelect2,
  emptyBack: emptyBack2
}
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
  objFun[name](val)
}
// 监听子级表格  传过来的方法
const listenClick2 = (name: string, val: any) => {
  objFun2[name](val)
}

onMounted(() => {
  if (id.value != '') {
    getPlanInfoApi(id.value).then((res) => {
      if (res.code == 0) {
        maintenanceForm.value.planType = JSON.stringify(res.data.planType)
        maintenanceForm.value.checkType = res.data.checkType
        maintenanceForm.value.checkTypeName = res.data.checkTypeName
        maintenanceForm.value.period = res.data.period
        maintenanceForm.value.periodUnit = res.data.periodUnit
        maintenanceForm.value.planBeginDate = res.data.planBeginDate
        maintenanceForm.value.planEndDate = res.data.planEndDate
        maintenanceForm.value.checkUser = res.data.checkUser.split(',')
        maintenanceForm.value.checkUserName = res.data.checkUserName.split(',')
        maintenanceForm.value.deviceType = res.data.deviceType
        state.tableData.param.deviceTypes.push(res.data.deviceType)
        state.tableData2.param.deviceTypes = res.data.deviceType
        state.tableData.first = true
        state.tableData2.first = true
        state.tableData.defaultList = res.data.deviceInfoList
        state.tableData2.defaultList = res.data.deviceItemList
        let arr = <any>[]
        let brr = <any>[]
        res.data.deviceInfoList.forEach((i: any) => {
          maintainDeviceNames.value.push(i.deviceName)
          arr.push(i.id)
        })
        maintenanceForm.value.checkDevices = arr.join(',')
        res.data.deviceItemList.forEach((i: any) => {
          maintainItemNames.value.push(i.itemName)
          brr.push(i.id)
        })
        maintenanceForm.value.checkItems = brr.join(',')
      }
    })
  }
})

const addDialog = ref(false)
const addCancel = () => {
  addDialog.value = !addDialog.value
}
const addSubmit = () => {
  addDialog.value = !addDialog.value
  getTableData2()
}
const goSetting = () => {
  addDialog.value = !addDialog.value
}
</script>
<style scoped lang="scss">
.addPlan {
  font-size: var(--el-font-size-base);

  .shebei-select {
    display: flex;
    width: 100%;

    &__tree {
      width: 20%;
      border-right: 1px solid rgba(217, 217, 217, 1);
      padding-right: 16px;

      .tree {
        margin-top: 16px;
      }
    }

    &__table {
      width: 50%;
      margin: 0 16px 0 16px;
    }

    &__xuanze {
      width: 30%;
      border: 1px solid rgba(224, 224, 224, 1);
      padding: 10px;
      margin-top: 62px;

      .xuanze-herder {
        display: flex;
        justify-content: space-between;

        .herder-num {
          font-size: var(--el-font-size-base);
          font-weight: 700;
        }

        .empty {
          cursor: pointer;
          color: var(--el-color-primary);
        }
      }
      .people {
        display: flex;
        flex-flow: row wrap;
        overflow: hidden;
        position: relative;
        max-height: 425px;

        .people-item {
          width: 46%;
          height: 30px;
          margin: 4px 8px;
          padding: 0 6px;
          background: rgba(232, 232, 232, 0.8);
        }
      }
      .people:hover {
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }

  .weibao-tips {
    width: 100%;
    margin: 0 16px 0 0;
    .tips {
      font-size: 13px;
      font-weight: 400;
      line-height: 21px;
      color: rgba(140, 140, 140, 1);
    }
    .sets {
      cursor: pointer;
      color: var(--el-color-primary);
      margin-left: 5px;
    }
  }

  .weibao-select {
    display: flex;
    width: 100%;

    &__table {
      width: 50%;
      margin: 0 16px 0 0;
    }

    &__xuanze {
      width: 30%;
      border: 1px solid rgba(224, 224, 224, 1);
      padding: 10px;
      margin-top: 62px;

      .xuanze2-herder {
        display: flex;
        justify-content: space-between;

        .herder2-num {
          font-size: var(--el-font-size-base);
          font-weight: 700;
        }

        .empty {
          cursor: pointer;
          color: var(--el-color-primary);
        }
      }
      .people2 {
        display: flex;
        flex-flow: row wrap;
        overflow: hidden;
        position: relative;
        max-height: 425px;
        .people2-item {
          width: 48%;
          height: 30px;
          margin: 4px;
          padding: 0 6px;
          background: rgba(232, 232, 232, 0.8);
        }
      }
      .people2:hover {
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }
}

.treeLabel {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-card-item {
  width: 100%;
  border-radius: 4px;
  transition: all ease 0.3s;
  padding: 20px;
  overflow: hidden;
  background: var(--el-color-white);
  color: var(--el-text-color-primary);
  border: 1px solid var(--next-border-color-light);

  &:hover {
    // box-shadow: 0 2px 12px var(--next-color-dark-hover);
    transition: all ease 0.3s;
  }
}

.shebei {
  margin: 15px 0;
}
</style>
<style>
.el-input__wrapper {
  background: white !important;
}
.el-tree-node__expand-icon {
  color: black !important;
}
.el-tree-node__expand-icon.is-leaf {
  color: transparent !important;
  cursor: default;
}
</style>
